<template>
  <view class="wrapper">
    <!-- 收货信息 -->
    <view class="shipment">
			<block v-if="address">
				<view class="dt">收货人:</view>
				<view class="dd meta">
					<text class="name">{{address.userName}}</text>
					<text class="phone">{{address.telNumber}}</text>
				</view>
				<view class="dt">收货地址:</view>
				<view class="dd">{{addr}}</view>
			</block>
			<button @click="getAddress" v-else>获取地址</button>
    </view>
    <!-- 购物车 -->
    <view class="carts">
      <view class="item">
        <!-- 店铺名称 -->
        <view class="shopname">优购生活馆</view>
        <view class="goods" v-for="(item,index) in carts" :key="item.goods_id">
          <!-- 商品图片 -->
          <image
            class="pic"
            :src="item.goods_small_logo"
          />
          <!-- 商品信息 -->
          <view class="meta">
            <view class="name">{{item.goods_name}}</view>
            <view class="price">
              <text>￥</text>{{item.goods_price}}
              <text>.00</text>
            </view>
            <!-- 加减 -->
            <view class="amount">
              <text @click="changeCount(index, -1)" class="reduce">-</text>
              <input
                type="number"
                disabled
                :value="item.goods_count"
                class="number"
              />
              <text @click="changeCount(index, 1)" class="plus">+</text>
            </view>
          </view>
          <!-- 选框 -->
          <view class="checkbox" @click="switchSingle(index, !item.goods_checked)">
            <icon
              type="success"
              size="20"
              :color="item.goods_checked ? '#ea4451' :'#ccc'"
            ></icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 其它 -->
    <view class="extra">
      <!-- <label class="checkall" @click="switchAll(!isAllSel)"> -->
			<!-- isAllSel = !isAllSel  是一个赋值语句，把右边的值保存到左边； 就是在设置isAllSel的值 -->
      <label class="checkall" @click="isAllSel = !isAllSel">
        <icon
          type="success"
          :color="isAllSel ? '#ea4451' :'#ccc'"
          size="20"
        ></icon>全选
      </label>
      <view class="total">
        合计:
        <text>￥</text>
        <label>{{totalMoney}}</label>
        <text>.00</text>
      </view>
      <view class="pay" @click="createOrder">结算({{totalCount}})</view>
    </view>
  </view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				address: null
			}
		},
		// 全选
		// 1. 它的状态由小项来决定
		// 2. 修改它的值  ====> 修改所有的小项
		
		// computed可以设置set，get
		computed: {
			addr() {
				return (
					this.address &&
					this.address.provinceName +
					this.address.cityName +
					this.address.countyName +
					this.address.detailInfo
				)
			},
			// 是否全选
			isAllSel: {
				get: function() { return this.carts.every(it => it.goods_checked) },
				set: function(val) {
					console.log(val)
					this.$store.commit('cart/switchAll',val)
				}
			},
			...mapGetters(['carts','totalMoney', 'totalCount', 'selectedCarts'])
		},
		methods: {
			async createOrder() {
				// 判断地址是否选了
				if(!this.address){
					uni.showToast({
						title: '请先选中收货地址'
					})
					return
				}
				if(!this.totalCount){
					uni.showToast({
						title: '请先选中商品'
					})
					return
				}
				// 检查是否登录 === 判断是否在本地有token
				if(!uni.getStorageSync('token')){
					uni.showToast({
						title: '请先登录',
						success() {							
							uni.navigateTo({
								url: '/packageone/auth/auth'
							})
						}
					})
					return
				}
				// todo:
				console.log('创建订单....')
				
				const res = await this.request({
					url: '/my/orders/create',
					method: 'post',
					data: {
						order_price: 0.01, // mock
						consignee_addr: this.addr,
						goods: this.selectedCarts.map(it => {
							return {
								goods_id: it.goods_id,
								goods_price: it.goods_price,
								goods_number: it.goods_count
							}
						})
						// goods:[// 选中的商品
						// 	{goods_id, goods_number, goods_price},
						// 	{goods_id, goods_number, goods_price}
						// ]  
					}
				})
				console.log('res', res)
				
				// 移除购物车（vuex）中选中的商品
				this.$store.commit('cart/removeSelected')
				// 跳转到订单列表页
				uni.navigateTo({
					url: '/packageone/order/order'
				})
			},
			// 获取微信客户端的预设地址
			// 每个微信用户都有自己的收货地址
			getAddress() {
				uni.chooseAddress({
					success:(res) => {
						console.log(res, this)
						this.address = res
					}
				})
			},
			// switchAll(val) {
			// 	this.$store.commit('cart/switchAll',val)
			// },
			// 把下标为idx的商品数量 增加 val（可能是-1）
			changeCount(idx, val) {
				this.$store.commit('cart/changeCount', {idx, val})
			},
			// 把下标为idx的商品的checked值设为val
			switchSingle(idx, val){
				this.$store.commit('cart/switchSingle', {idx, val})
			}
		}
	}
</script>

<style scoped lang="scss">
.shipment {
  height: 100rpx;
  line-height: 2;
  padding: 30rpx 30rpx 40rpx 30rpx;
  font-size: 27rpx;
  color: #333;
  background-color: #fff;
  background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;

  .dt {
    width: 140rpx;
    float: left;
    clear: both;
  }

  .dd {
    padding-left: 160rpx;
  }

  .meta {
    padding-right: 50rpx;
  }

  text.phone {
    float: right;
  }
}

.carts {
  background-color: #f4f4f4;
  padding-bottom: 110rpx;
  overflow: hidden;

  .shopname {
    padding: 30rpx;
    margin-top: 20rpx;
    font-size: 30rpx;
    color: #333;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
  }

  .goods {
    display: flex;
    padding: 30rpx 20rpx 30rpx 0;
    margin-left: 100rpx;
    border-bottom: 1rpx solid #eee;
    background-color: #fff;

    position: relative;

    .checkbox {
      width: 101rpx;
      height: 100%;
      background-color: #fff;

      display: flex;
      justify-content: center;
      align-items: center;

      position: absolute;
      left: -100rpx;
      top: 0;
    }

    &:last-child {
      border-bottom: none;
    }

    .pic {
      width: 200rpx;
      height: 200rpx;
      margin-right: 30rpx;
    }

    .meta {
      flex: 1;
      font-size: 27rpx;
      color: #333;
      position: relative;
    }

    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      position: absolute;
      bottom: 0;

      color: #ea4451;
      font-size: 33rpx;

      text {
        font-size: 22rpx;
      }
    }

    .amount {
      position: absolute;
      bottom: 0;
      right: 20rpx;

      height: 48rpx;
      text-align: center;
      border: 1rpx solid #ddd;
      border-radius: 8rpx;

      display: flex;
      align-items: center;

      text {
        display: block;
        width: 60rpx;
        line-height: 48rpx;
        font-size: 36rpx;
        color: #ddd;
        text-align: center;
      }

      input {
        width: 60rpx;
        height: 48rpx;
        min-height: 48rpx;
        font-size: 27rpx;
        border-left: 1rpx solid #ddd;
        border-right: 1rpx solid #ddd;
      }
    }
  }
}

.extra {
  position: fixed;
  bottom: 0;
  /* #ifdef H5 */
  bottom: 50px;
  /* #endif */
  left: 0;
  z-index: 9;

  width: 750rpx;
  height: 96rpx;
  text-align: center;
  line-height: 96rpx;
  font-size: 36rpx;
  border-top: 1rpx solid #eee;
  background-color: #fff;
  color: #333;
  display: flex;

  .checkall {
    width: 140rpx;
    line-height: 1;
    margin-left: 25rpx;
    display: flex;
    align-items: center;

    icon {
      margin-right: 20rpx;
    }
  }

  .total {
    display: flex;
    justify-content: center;
    flex: 1;

    label,
    text {
      color: #ea4451;
      vertical-align: bottom;
      position: relative;
      bottom: -2rpx;
    }

    text {
      position: relative;
      bottom: -3rpx;
      font-size: 24rpx;

      &:first-child {
        margin-left: 10rpx;
      }
    }
  }

  .pay {
    width: 200rpx;
    background-color: #ea4451;
    color: #fff;
  }
}
</style>